<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 视频播放区域 -->
			<view>
				<video id="myVideo" class="grace-course-video" :src="courseList[playIndex].src" :poster="courseList[playIndex].poster" controls></video>
			</view>
			<!-- 基础信息 -->
			<view class="grace-course-info grace-nowrap grace-flex-vcenter">
				<view class="grace-course-info-body">
					<view class="grace-course-title">{{courseList[playIndex].title}}</view>
					<view class="grace-nowrap">
						<text class="grace-course-info-text">时长 : {{courseList[playIndex].timer}}</text>
						<text class="grace-course-info-text">播放 : {{courseList[playIndex].viewnumber}} 次</text>
					</view>
				</view>
				<view class="grace-course-info-share">
					<view class="grace-icons icon-share grace-h4 grace-blue grace-text-center"></view>
					<view class="grace-text-small grace-gray grace-text-center">分享</view>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 切换导航 -->
			<view class="grace-margin-top">
				<graceNavBar :items="navs" 
					lineHeight="60rpx" :isCenter="true" 
					:currentIndex="navCurrentIndex" :size="220" 
					activeLineBg="#3688FF" textAlign="center" 
					activeColor="#3688FF" activeLineWidth="100%" activeLineHeight="2rpx" 
					:margin="10" @change="navChange"></graceNavBar>
			</view>
			<!-- 课程描述 -->
			<view class="grace-body grace-margin-top" v-if="navCurrentIndex == 0">
				<image src="https://staticimgs.oss-cn-beijing.aliyuncs.com/indexBanner01.png" style="width:100%;" mode="widthFix"></image>
				<view class="grace-text grace-black9 grace-margin-top" style="line-height:1.8em; text-indent:2em;">
					<text>我见过春日夏风秋叶冬雪，也踏遍南水北山东麓西岭，可这四季春秋 苍山泱水，都不及你冲我展眉一笑。</text>
				</view>
			</view>
			<!-- 课程目录 -->
			<view class="grace-list" v-if="navCurrentIndex == 1">
				<view class="grace-list-items" v-for="(item, index) in courseList" :key="index" @tap="play(index)">
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text" v-if="playIndex ==  index">[ 播放中 ] {{item.title}}</text>
							<text class="grace-list-title-text" v-else>{{item.title}}</text>
						</view>
						<view class="grace-list-body-desc">时长 : {{item.timer}} · 播放 : {{item.viewnumber}} 次</view>
					</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../../graceUI/components/gracePage.vue";
import graceNavBar from "../../../graceUI/components/graceNavBar.vue";
// 模拟一个视频地址减少代码量实际开发请在下面的视频数据中使用视频真实地址
var vsrc = "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400";
export default{
	data() {
		return {
			playIndex : 0,
			navCurrentIndex : 0,
			navs : ['课程描述', '课程目录'],
			courseList : [
				{
					'title' : '黄鹤楼送孟浩然之广陵(李白)',
					'src'   : vsrc,
					'poster': 'https://images.pexels.com/photos/2819353/pexels-photo-2819353.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'timer' : '11分50秒',
					'viewnumber' : '15025'
				},
				{
					'title' : '将赴吴兴登乐游原一绝(杜牧)',
					'src'   : vsrc,
					'poster': 'https://images.pexels.com/photos/1352196/pexels-photo-1352196.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'timer' : '09分18秒',
					'viewnumber' : '13598'
				},
				{
					'title' : '云阳馆与韩绅宿别(司空曙)',
					'src'   : vsrc,
					'poster': 'https://images.pexels.com/photos/2387869/pexels-photo-2387869.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'timer' : '12分11秒',
					'viewnumber' : '22880'
				},
				{
					'title' : '至德二载甫自京金光门(杜甫)',
					'src'   : vsrc,
					'poster': 'https://images.pexels.com/photos/2387869/pexels-photo-2387869.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'timer' : '06分51秒',
					'viewnumber' : '19055'
				},
				{
					'title' : '赋得暮雨送李曹(韦应物)',
					'src'   : vsrc,
					'poster': 'https://images.pexels.com/photos/2387869/pexels-photo-2387869.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'timer' : '18分01秒',
					'viewnumber' : '30258'
				},
				{
					'title' : '饯别王十一南游(刘长卿)',
					'src'   : vsrc,
					'poster': 'https://images.pexels.com/photos/2387869/pexels-photo-2387869.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
					'timer' : '03分01秒',
					'viewnumber' : '50258'
				}
			]
		}
	},
	onLoad : function (){
		uni.setNavigationBarTitle({title:this.courseList[this.playIndex].title});
	},
	methods:{
		navChange : function (index) {
			console.log(index);
			this.navCurrentIndex = index;
		},
		play : function(index){
			console.log(index);
			this.playIndex = index;
			uni.setNavigationBarTitle({title:this.courseList[this.playIndex].title});
			uni.pageScrollTo({
				scrollTop:0
			})
		}
	},
	components:{gracePage, graceNavBar}
}
</script>
<style>
.grace-course-video{width:750rpx;}
.grace-course-info{background-color:#FFFFFF; padding:20rpx 25rpx;}
.grace-course-info-body{width:700rpx;}
.grace-course-info-share{width:100rpx;}
.grace-course-title{font-size:32rpx; line-height:50rpx; color:#333333;}
.grace-course-info-text{font-size:22rpx; color:#999999; line-height:38rpx; margin-right:30rpx; margin-top:8rpx;}
.grace-common-line{height:20rpx; background-color:#F4F5F6;}
.grace-playing{color:#3688FF;}
</style>